<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">职务变更</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="tensyte">
            <div class="titleinhead">
                <div class="name">姓名</div>
                <div class="fr">{{tbdetail.name}}</div>
            </div>
            <div class="titleinhead">
                <div class="name">所属团队</div>
                <div class="fr">{{tbdetail.agencyTeam.name}}</div>
            </div>
            <div class="titleinhead">
                <div class="name">团队职务</div>
                <div class="fr" v-if="tbdetail.role == 'FOLLOW' ">业务经理</div>
                <div class="fr" v-if="tbdetail.role == 'LEADER' ">团队长</div>
            </div>
        </div>
        <div class="namettues">要变更的职务</div> 

        <div class="tensytesdf">
             <!-- 单选 -->
            <div class="ridao">
                <div class="ridao_dan" @click="addzirenday()">
                    <div class="zuo_index">
                        <div class="top_tit">团队长</div>
                        <!-- <div class="bont_tit">预计2021-03-03 09:00到账</div> -->
                    </div>
                    <div class="you_index">
                        <!-- 选中 -->
                        <img v-if="xuanzhong == 0" src="../../../static/images/icon-select.png" alt="">
                        <!-- 未选中 -->
                        <img v-if="xuanzhong == 1" src="../../../static/images/icon-select-nor.png" alt="">
                    </div>
                </div>
                
                <div class="ridao_dan" @click="twodata()">
                    <div class="zuo_index">
                        <div class="top_tit">业务经理</div>
                    </div>
                    <div class="you_index">
                        <img v-if="zhongyuan == 0" src="../../../static/images/icon-select.png" alt="">
                        <img v-if="zhongyuan == 1" src="../../../static/images/icon-select-nor.png" alt="">
                    </div>
                </div>

            </div>
        </div>
        <div class="niceckead">
            <!-- <div class="isok">提现</div> -->
            <van-button type="primary"  color="#3288FF"  block @click="administrator()">确定</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant';
import { Notify } from 'vant';
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            tbdetail:JSON.parse(this.$route.query.tbdetail),
            // 自然日到账
            xuanzhong:0,
            // 两小时后
            zhongyuan:1,
            role:'LEADER',
        }
    },
    mounted(){
        console.log(this.tbdetail)
    },
    methods:{
        // 自然日到账
        addzirenday(){
            // 自然日到账
            this.xuanzhong = 0
            // 两小时后
            this.zhongyuan = 1
            this.role = 'LEADER'
            
        },
        // 两小时后
        twodata(){
            // 自然日到账
            this.xuanzhong = 1
            // 两小时后
            this.zhongyuan = 0
            this.role = 'FOLLOW'
        },

        // 确定变更 设为图团长
        administrator(){
            // if(this.xuanzhong != 0){
            //     Notify({ type: 'warning', message: '请先勾选团队长' });
            //     return;
            // }
            Dialog.confirm({
                title: '提示',
                message: '是否设置该成员 '+ this.tbdetail.name +' 为团队长',
            })
            .then(() => {
                // on confirm
                let data = {
                    teamId:this.tbdetail.agencyTeam.id,//团队id
                    memberId:this.tbdetail.id,//成员id
                    role:this.role,
                }
                this.$api.roles(data).then((res)=>{
                    console.log(res);
                    if(res.status == '0000'){
                        Notify({ type: 'success', message: '设置成功' });
                        setTimeout(()=>{
                            // this.$router.push({ name: "teamManagement" });
                            this.$router.go(-2)
                        },1000)
                    }else{
                        Notify({ type: 'warning', message: res.describe });
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .tensyte{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background: #fff;
    }
    .titleinhead{
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;
        background: #fff;
    }
    .titleinhead>.name{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .titleinhead>.fr{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .namettues{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
        margin-top: 25px;
        margin-bottom: 16px;
        padding: 0 16px;
        box-sizing: border-box;
    }












    .tensytesdf{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .ridao{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background: #fff;
    }
    .ridao_dan{
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F2F2F2;
    }
    .zuo_index{
        width: 88%;
    }
    .top_tit{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .bont_tit{
        width: 100%;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .you_index{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .you_index>img{
        width: 100%;
        height: 100%;
    }


    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
</style>